<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>leeya网盘</title>
		<style type="text/css">
			.outSide {
				margin-top: 15px;
				border-bottom: 1px solid #ccc;
				margin-bottom: 10px;
			}
		</style>

		<!-- Bootstrap -->
		<link href="css/bootstrap.min.css" rel="stylesheet" />

		<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
		  <link rel="stylesheet" media="screen" href="css/style.css">
	</head>
	<body>
		<div id="app">
				<div class="" v-show="loginFlag == false">
			<div class='container outSide'>
				<div class='row'>
					<div class='col-md-6'>
						<h3>Leeya网盘<small>做我自己的数据库</small></h3>
					</div>
					<div class='col-md-2 col-md-offset-3'>
						<!-- <input type='button' class='btn btn-success btn-myBtn' value='登录／注册' data-toggle="modal" data-target=".abc" style="margin-top: 15px;"> -->
						<input type='button' class='btn btn-success btn-myBtn' value='登录／注册' style="margin-top: 15px;" @click="changeFlag(true)">
						
						<p class='namesNode hide' style='margin-top: 25px;'>欢迎回来 <span></span></p>
					</div>

				</div>
			</div>


			<div class='container fileShowNode hide'>
				<table class='table text-center table-hover'>
					<thead>
						<tr>
							<td>序号</td>
							<td>文件名</td>
							<td>文件大小</td>
							<td>上传时间</td>
							<td>下载次数</td>
							<td>是否删除</td>
						</tr>
					</thead>
					<tbody>
						<!--
          <tr>
            <td>1</td>
            <td>asjdals.jpg</td>
            <td>21mb</td>
            <td>2017/22</td>
            <td>0</td>
            <td><input type="button" name="" class='btn btn-default btn-danger btn-xs' value='删除'></td>
          </tr>
        -->
						</thead>
				</table>
				<form class='form-inline'>
					<div class='form-group'>
						<input type="file" name="" class='fsNode'>
					</div>
					<div class='form-group'>
						<input type="button" name="" class='btn btn-default btn-primary btn-xs btn-setFiles' value="上传文件" data-toggle="modal"
						 data-target=".bbb">
					</div>
				</form>
			</div>



			<div class="modal fade bbb" tabindex="-1" role="dialog">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
							<h4 class="modal-title">信息栏</h4>
						</div>
						<div class="modal-body bodytextNode">
							<div class="progress">
								<div class="progress-bar progress-bar-info progress-bar-striped" id='prsbarNode' role="progressbar"
								 aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
									0%
								</div>
							</div>
							<p>One fine body&hellip;</p>
						</div>
					</div><!-- /.modal-content -->
				</div><!-- /.modal-dialog -->
			</div><!-- /.modal -->
			<!-- <div class="modal fade abc" tabindex="-1" role="dialog">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
							<h4 class="modal-title">注册登录框</h4>
						</div>
						<div class="modal-body">
							<form class='myForm'>
								<div class='form-group'>
									<label>用户名：</label>
									<input type="" name="" class='form-control userNode' v-model="user">
								</div>
								<div class='form-group'>
									<label>密码：</label>
									<input type="password" name="" class='form-control' v-model="pass">
								</div>
								<input type="button" name="" value='登录' class='btn btn-default btn-primary' @click="login">
								<input type="button" name="" value='注册' class='btn btn-default btn-info btn-res' @click="registered">
							</form>
						</div>
					</div>
				</div>
			</div> -->
			</div>
			<div class="" v-show="loginFlag == true">
				<div id="particles-js">
						<div class="login">
							<div class="login-top">
								登录
							</div>
							<div class="login-center clearfix">
								<div class="login-center-img"><img src="img/name.png"/></div>
								<div class="login-center-input">
									<input type="text" class="userNode" v-model="user" placeholder="请输入您的用户名"/>
									<div class="login-center-input-text">用户名</div>
								</div>
							</div>
							<div class="login-center clearfix">
								<div class="login-center-img"><img src="img/password.png"/></div>
								<div class="login-center-input">
									<input type="password" v-model="pass" placeholder="请输入您的密码"/>
									<div class="login-center-input-text">密码</div>
								</div>
							</div>
							
							<div class="login-button"  @click="login">
								登录
							</div>
							
							<div class="login-button" @click="registered">
								注册
							</div>
															
						</div>
						<div class="sk-rotating-plane"></div>
				</div>

			</div>
		</div>
		<script src="js/jq.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script src="js/particles.min.js"></script>
		<script src="js/app.js"></script>
		<script type="text/javascript">
			function hasClass(elem, cls) {
			  cls = cls || '';
			  if (cls.replace(/\s/g, '').length == 0) return false; //当cls没有参数时，返回false
			  return new RegExp(' ' + cls + ' ').test(' ' + elem.className + ' ');
			}
			 
			function addClass(ele, cls) {
			  if (!hasClass(ele, cls)) {
			    ele.className = ele.className == '' ? cls : ele.className + ' ' + cls;
			  }
			}
			 
			function removeClass(ele, cls) {
			  if (hasClass(ele, cls)) {
			    var newClass = ' ' + ele.className.replace(/[\t\r\n]/g, '') + ' ';
			    while (newClass.indexOf(' ' + cls + ' ') >= 0) {
			      newClass = newClass.replace(' ' + cls + ' ', ' ');
			    }
			    ele.className = newClass.replace(/^\s+|\s+$/g, '');
			  }
			}
				document.querySelector(".login-button").onclick = function(){
						addClass(document.querySelector(".login"), "active")
						setTimeout(function(){
							addClass(document.querySelector(".sk-rotating-plane"), "active")
							document.querySelector(".login").style.display = "none"
						},800)
						setTimeout(function(){
							removeClass(document.querySelector(".login"), "active")
							removeClass(document.querySelector(".sk-rotating-plane"), "active")
							document.querySelector(".login").style.display = "block"
							alert("登录成功")
							
						},5000)
				}
		</script>
		<script src="js/vue.js"></script>
		<script>
			var vue = new Vue({
				el: '#app',
				data: {
					context: false,
					loginFlag: false,
					user: '',
					pass: ''
				},
				created() {


				},
				methods: {
					changeFlag(Boolean){
						this.loginFlag = Boolean;
					},
					login() {
						//登录
						
						$.ajax({
							url: 'http://localhost:9111/login/login',
							type: 'get',
							data: {
								'user': this.user,
								'pass': this.pass
							},
							success: (data) => {
								//console.log(data)
								if (data.ok == 1) {
									//alert(data.msg);
									$('.abc').modal('toggle');

									this.loginFlag = false;
									//this.context = true;

									//this.data = data.data;
									$('.btn-myBtn').hide();
									$('.namesNode').removeClass('hide');
									$('.namesNode span').html($('.userNode').val());
									$('.fileShowNode').removeClass('hide');

									for (var i = 0; i < data.data.length; i++) {
										$('.fileShowNode tbody')[0].appendChild(toTr(index, data.data[i].LastName, (data.data[i].size / 1024).toFixed(
											2) + 'KB', data.data[i].lastTime, data.data[i].download, data.data[i].hashName));
										index++;
									}
								} else {
									alert(data.msg);
									$('.myForm .form-group').addClass('has-error');
								}
							}
						})

					},
					registered() {
						//注册
						$.ajax({
							url: 'http://localhost:9111/login/res',
							type: 'get',
							data: {
								'user': this.user,
								'pass': this.pass
							},
							success: function(data) {
								if (data.ok == 1) {
									alert(data.msg);
									// $('.abc').modal('toggle');
								} else {
									alert(data.msg);
									$('.myForm .form-group').addClass('has-error');
								}
							}
						})

					}
				}
			});
		</script>
		<script type="text/javascript">
			(() => {
				let index = 1;
				$('.btn-myBtn').on({
					click() {
						$('.myForm .form-group').removeClass('has-error');
						$('.userNode').val('');
						$('.passNode').val('');

					}
				});


				function toTr(index, filesName, size, timer, download, hash) {
					var oTr = document.createElement('tr');
					$(oTr).attr('hash', hash);
					oTr.innerHTML =
						`
            <td>${index}</td>
            <td>${filesName}</td>
            <td>${size}</td>
            <td>${timer}</td>
            <td>${download}</td>
            <td><input type='button' class='btn btn-default btn-danger btn-xs btn-deleteNode' value='删除' data-toggle="modal" data-target=".bbb"></td>`;

					return oTr;
				}


				//删除文件
				$('body').on({
					'click': function() {
						var _this = this;
						$.ajax({
							url: 'http://localhost:9111/login/removeFile',
							type: 'get',
							data: {
								user: $('.userNode').val(),
								hash: $(_this.parentNode.parentNode).attr('hash')
							},
							success: function(data) {
								//console.log(data)
								if (data.ok == 1) {
									// $('.abc').modal('toggle');
									$('.bodytextNode p').html(data.msg);
									_this.parentNode.parentNode.remove();

								} else {
									$('.bodytextNode p').html(data.msg);
								}
							}
						})
					}
				}, '.btn-deleteNode')


				//上传文件
				$('.btn-setFiles').on({
					'click': function() {

						prsbarNode.style.width = '0%';
						prsbarNode.innerHTML = '0';
						var FromNode = new FormData();
						console.log($('.fsNode')[0].files[0])
						FromNode.append('files', $('.fsNode')[0].files[0]);
						FromNode.append('Fsnames', $('.userNode').val());

						var xhr = new XMLHttpRequest();
						xhr.open('post', 'http://localhost:9111/login/getfiles', true);

						xhr.upload.onprogress = function(e) {
							//console.log();
							console.log(parseInt(e.loaded / e.total * 100))
							prsbarNode.style.width = parseInt(e.loaded / e.total * 100) + '%';
							prsbarNode.innerHTML = parseInt(e.loaded / e.total * 100);

						};
						xhr.send(FromNode);
						$('.bodytextNode p').html('正在上传中...');

						xhr.onload = function() {
							var json = eval('(' + xhr.responseText + ')');
							//index,filesName,size,timer,download,hash
							if (json.ok == 1) {
								$('.bodytextNode p').html('恭喜您～上传成功');
								$('.fileShowNode tbody')[0].appendChild(toTr(index, $('.fsNode')[0].files[0].name, ($('.fsNode')[0].files[
									0].size / 1024).toFixed(2) + 'KB', json.timer, 0, json.hash));
								index++;

							} else {
								$('.bodytextNode p').html(json.msg);
							}
							$('.fsNode').val('');



						};


					}
				})
				//登录
				// $('.btn-loginNode').on({
				// 	click() {
				// 		$.ajax({
				// 			url: 'http://localhost:9111/login/login',
				// 			type: 'get',
				// 			data: {
				// 				'user': $('.userNode').val(),
				// 				'pass': $('.passNode').val()
				// 			},
				// 			success: function(data) {
				// 				//console.log(data)
				// 				if (data.ok == 1) {
				// 					//alert(data.msg);
				// 					$('.abc').modal('toggle');
				// 					$('.btn-myBtn').hide();
				// 					$('.namesNode').removeClass('hide');
				// 					$('.namesNode span').html($('.userNode').val());
				// 					$('.fileShowNode').removeClass('hide');


				// 					//$('.fileShowNode tbody')[0].appendChild(toTr(index,$('.fsNode')[0].files[0].name,$('.fsNode')[0].files[0].size/1024+'KB',json.timer,0,json.hash));

				// 					//[{},{},{}]
				// 					for (var i = 0; i < data.data.length; i++) {
				// 						$('.fileShowNode tbody')[0].appendChild(toTr(index, data.data[i].LastName, (data.data[i].size / 1024).toFixed(
				// 							2) + 'KB', data.data[i].lastTime, data.data[i].download, data.data[i].hashName));
				// 						index++;
				// 					}
				// 				} else {
				// 					alert(data.msg);
				// 					$('.myForm .form-group').addClass('has-error');
				// 				}
				// 			}
				// 		})
				// 	}
				// });
				//注册
				// $('.btn-res').on({
				// 	click() {
				// 		$.ajax({
				// 			url: 'http://localhost:9111/login/res',
				// 			type: 'get',
				// 			data: {
				// 				'user': $('.userNode').val(),
				// 				'pass': $('.passNode').val()
				// 			},
				// 			success: function(data) {
				// 				if (data.ok == 1) {
				// 					alert(data.msg);
				// 					// $('.abc').modal('toggle');
				// 				} else {
				// 					alert(data.msg);
				// 					$('.myForm .form-group').addClass('has-error');
				// 				}
				// 			}
				// 		})
				// 	}
				// })
			})();
		</script>
	</body>
</html>
